<template>
  <div class="header-search show">
    <el-autocomplete
      v-model="search"
      class="my-ipt"
      prefix-icon="el-icon-search"
      :trigger-on-focus="false"
      :fetch-suggestions="querySearchAsync"
      placeholder="请搜索"
      @select="handleSelect"
    >
      <template slot-scope="{ item }">
        <div v-if="item.type == 'title'" class="title-vw">{{ item.name }}</div>
        <template v-else>
          <div class="content-vw">
            <div>
              <div class="addr">{{ item.values1 }}</div>
              <div class="addr">{{ item.values2 }}</div>
            </div>
            <span :style="{color: item.status_color}" class="addr">{{ item.status }}</span>
          </div>
        </template>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
// fuse is a lightweight fuzzy-search module
// make search results more in line with expectations
// import Fuse from 'fuse.js'
// import path from 'path'

export default {
  name: 'HeaderSearch',
  data() {
    return {
      fuse: undefined,

      search: '',
      restaurants: [],
      timeout: null
    }
  },
  mounted() {
    this.restaurants = this.loadAll()
  },
  methods: {
    loadAll() {
      return [
        { 'value': '三全鲜食（北新泾店）', 'address': '长宁区新渔路144号', id: '123' },
        { 'value': '三全鲜食（新店）', 'address': '宁区渔路14号', id: '124' },
        { 'value': 'Hot honey 首尔炸鸡（仙霞路）', 'address': '上海市长宁区淞虹路661号' },
        { 'value': '新旺角茶餐厅', 'address': '上海市普陀区真北路988号创邑金沙谷6号楼113' },
        { 'value': '泷千家(天山西路店)', 'address': '天山西路438号' },
        { 'value': '胖仙女纸杯蛋糕（上海凌空店）', 'address': '上海市长宁区金钟路968号1幢18号楼一层商铺18-101' },
        { 'value': '贡茶', 'address': '上海市长宁区金钟路633号' },
        { 'value': '豪大大香鸡排超级奶爸', 'address': '上海市嘉定区曹安公路曹安路1685号' }
      ]
    },
    querySearchAsync(queryString, cb) {
      // console.log(queryString)
      // var restaurants = this.restaurants
      // var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants
      var results = [{
        'Client': {
          'name': '用户',
          'list': [{
            'id': 1,
            'url': '#/customer-view/abstract?id=1',
            'values1': '测试时',
            'values2': '',
            'values3': '',
            'status': '正常',
            'status_color': '#3fbf70'
          }]
        },
        'Products': {
          'name': '产品',
          'list': []
        },
        'Tickets': {
          'name': '工单',
          'list': [{
            'id': 1,
            'url': '#/support-ticket-detail?id=1&tid=932154',
            'values2': '932154-测试杀杀杀',
            'status': '已回复',
            'title': '测试杀杀杀',
            'values3': '测试时',
            'values1': '工单#',
            'status_color': '#0BCF15'
          }]
        },
        'Invoice': {
          'name': '账单',
          'list': []
        },
        'Customfields': {
          'name': '自定义字段',
          'list': []
        }
      }]

      var lRes = this.forObjList(results)
      // console.log(lRes)
      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(lRes)
      }, 1000)
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    forObjList(ar) {
      const list = []
      ar.forEach(el => {
        for (const key in el) {
          if (Object.hasOwnProperty.call(el, key)) {
            const obj = el[key]
            if (obj.list.length !== 0) {
              const item1 = {
                name: obj.name,
                type: 'title'
              }
              list.push(item1)
              obj.list.forEach(content => {
                const item2 = {
                  ...content,
                  type: 'content'
                }
                list.push(item2)
              })
            }
          }
        }
      })
      return list
    },
    handleSelect(item) {
      console.log(item)
      if (item.type !== 'title') {
        this.$router.push({ path: '/table' })
      }
      this.search = ''
    }

  }
}
</script>

<style lang="scss">
.my-ipt{
  width: 200px;

  .el-input__inner{
    background-color: transparent!important;
    border: none;
    color: #fff;
    border-bottom: 1px solid #DCDFE6;
    border-radius: 0;
  }
}
</style>

<style lang="scss" scoped>
.header-search {
  font-size: 0 !important;
  margin-right: 20px;

  .search-icon {
    cursor: pointer;
    font-size: 18px;
    vertical-align: middle;
    color: #fff;
  }

  .header-search-select {
    font-size: 18px;
    transition: width 0.2s;
    width: 0;
    overflow: hidden;
    background: transparent;
    border-radius: 0;
    display: inline-block;
    vertical-align: middle;

    ::v-deep .el-input__inner {
      border-radius: 0;
      border: 0;
      padding-left: 0;
      padding-right: 0;
      box-shadow: none !important;
      border-bottom: 1px solid #d9d9d9;
      vertical-align: middle;
    }
  }

  &.show {
    .header-search-select {
      width: 210px;
      margin-left: 10px;
    }
  }
}

.title-vw{
  font-size: 16px;
  text-indent: 5px;
  font-weight: 700;
}

.content-vw{
  position: relative;
  border-bottom: 1px solid #ddd;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
